<template>
  <div class="login-box-container">
    <div class="box-block position-center bg-white text-center">
      <div class="pb-5">
        <p class="title fwb  pb-4">登录后可继续操作</p>
        <p class="info text-info ">奇途旅行申请获取以下权限<br />微信绑定的头像昵称，手机号等</p>
      </div>
      <button class="getUserInfo-btn flex-c text-green fwb" open-type="getUserInfo"
              @getuserinfo="bindGetUserInfo">微信快捷登录</button>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  data() {
    return {
    }
  },
  methods: {
    bindGetUserInfo(e) {
      const userInfo = e.mp.detail.userInfo
      if (userInfo) {
        this.$emit('getUserInfo', userInfo)
      }
    }
  },
}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
@import "@/styles/index.scss";
.login-box-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  @include wh(100vw, 100vh);
  background: rgba(24, 25, 26, 0.6);
  .box-block {
    width: 540rpx;
    padding-top: 40rpx;
    border-radius: 30rpx;
    .title {
      font-size: 36rpx;
    }
    .getUserInfo-btn {
      height: 120rpx;
      font-size: 34rpx;
      border-top: 1px solid #e4f3e7;
    }
  }
}
</style>